<template>
    <div id="homeContainer">
        <!--    全体公告与班级通知   -->
        <div id="noticeContainer">
            <!--    全体公告    -->
            <div class="notice" id="allNotice">
                <div class="noticeTitle">全体公告</div>
                <el-table
                        class="noticeTable"
                        :data="allNoticeData"
                        height="250"
                        width="450"
                >
                    <el-table-column type="expand">
                        <template #default="props">
                            <el-collapse-transition>
                                <div>
                                    <p class="noticeContent">
                                        <div class="title">公告内容</div>
                                        <div class="content">{{ props.row.noticeContent }}</div>
                                    </p>
                                </div>
                            </el-collapse-transition>
                        </template>
                    </el-table-column>
                    <el-table-column prop="releaseTime" label="发布时间" width="200" align="center"/>
                    <el-table-column prop="noticeTitle" label="标题" width="250" align="center"/>
                </el-table>
            </div>
            <!--    班级通知    -->
            <div class="notice">
                <div class="noticeTitle">班级通知</div>
                <el-table class="noticeTable"
                          :data="classNoticeData"
                          height="250"
                          width="450"
                >
                    <el-table-column type="expand">
                        <template #default="props">
                            <p class="noticeContent">
                                <div class="title">通知内容</div>
                                <div class="content">{{ props.row.noticeContent }}</div>
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="releaseTime" label="发布时间" width="200" align="center"/>
                    <el-table-column prop="noticeTitle" label="标题" width="250" align="center"/>
                </el-table>
            </div>
        </div>
        <!--    用户信息   -->
        <div id="userInfoContainer">
            <div id="head">个人信息</div>
            <div id="userInfo">
                <div class="rowInfo">用户名：{{ userInfo.userName }}</div>
                <div class="rowInfo">账号：{{ userInfo.userAccount }}</div>
                <div class="rowInfo">手机号：{{ userInfo.userPhone }}</div>
                <div class="rowInfo">邮箱：{{ userInfo.userEmail }}</div>
                <div class="rowInfo">班级：{{ userInfo.className }}</div>
                <div class="rowInfo">是否班级管理员：{{ userInfo.isClassAdmin }}</div>
            </div>
        </div>
    </div>
</template>
<script>
import '../assets/Home.css'
import request from '@/utils/requset.js'
//路由跳转
import router from "@/router";
//element-plus 提示框
import prompt from "@/utils/prompt";

export default {
    name: 'home',
    data() {
        return {
            allNoticeData: [],
            classNoticeData: [],
            userInfo: [],
            token: '',
        }
    },
    beforeCreate() {
    },
    created() {
        if (this.isLogin()) {
            this.loadUserData();
            this.loadAllNoticeData();
            this.loadClassNoticeData();
            return;
        }
        prompt("还未登录！", "error");
    },
    methods: {
        //检测用户是否登录
        isLogin() {
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            if (token === "") {
                router.push({path: '/login'});
                return false;
            }
            return true;
        },
        //获取用户信息
        loadUserData() {
            //从本地数据获取token
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            if (token === "") {
                return;
            }
            request.get("/user/info", {
                //参数
                params: {
                    token: token,
                }
                //处理返回结果
            }).then(result => {
                //数据获取失败
                if (parseInt(result.code) >= 601 && parseInt(result.code) <= 604) {
                    prompt(result.message, result.type);
                    router.push({path: "/login"});
                    return;
                }
                if (result.code !== "200") {
                    prompt(result.message, result.type);
                    return;
                }
                //数据获取成功
                //存储用户信息到本地浏览器
                localStorage.setItem("userInfo", JSON.stringify(result.data));
                this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
            })
        },
        //获取全体公告
        loadAllNoticeData() {
            //从本地数据获取token
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            if (token === "") {
                return;
            }
            request.get("/notice/all").then(result => {
                //查询全体公告失败
                if (result.code !== "200") {
                    return;
                }
                //查询全体公告成功
                this.allNoticeData = result.data.allNotice;
            })
        },
        //获取班级公告
        loadClassNoticeData() {
            //从本地数据获取token
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            if (token === "") {
                return;
            }
            //利用token请求数据
            request.get(
                "/classNotice/all",
                {
                    //参数
                    params: {
                        token: token,
                    }
                }
                //处理返回结果
            ).then(result => {
                //查询班级通知失败
                if (result.code !== "200") {
                    return;
                }
                //查询班级通知成功
                this.classNoticeData = result.data.classNotice;
            })
        },
    }
}
</script>